<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .kz{
            width: 400px;
            height: 200px;
            border: 5px black solid;
            border-radius: 20px;
            margin: 0 auto;
            padding: 50px;
        }
        .d{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: red;
            float: right;
        }
        .jsq{
            width: 400px;
            height: 130px;
            border: 2px black solid;
            margin-top: 50px;
            clear: both;
            font-size: 80px;
            text-align: center;
            line-height: 130px;
        }
        .line{
            width: 400px;
            height: 200px;
            margin: 0 auto;
        }
        .line>div{
            float: left;
            height: 200px;
            width: 5px;
            margin-left: 100px;
        }
        .r{
            background-color: red;
        }
        .g{
            background-color: green;
        }
        .b{
            background-color: blue;
        }
        .boom{
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="kz">
        <div class="d">

        </div>
        <div class="jsq">
            00:00:10
        </div>

    </div>
    <div class="line">
            <div class="r">

            </div>
            <div class="g">

            </div>
            <div class="b">

            </div>
    </div>


    <script>
        // 停止计时器
        function tz() {
            clearInterval(time_interval);
            clearInterval(d_interval);
        }

        //爆炸
        function bz() {
            var kz = document.getElementsByClassName("kz")[0];
            kz.innerHTML = "<img class='boom' src='1.jpg'>";
            tz();
        }

        // 计时器
        var number = 10;
        var jsq = document.getElementsByClassName("jsq")[0];
        var time_interval = setInterval(
            function () {
                if(number>0){
                    number -= 1;
                }else {
                    bz()
                };
                var t = "00:00:0"+number;
                jsq.innerText = t;
            },1000
        );

        //计时灯
        var d = document.getElementsByClassName("d")[0];
        var d_l = "red";
        var d_interval = setInterval(
            function () {
                if(d_l == "red"){
                    d_l = "white"
                }else {
                    d_l = "red"
                }
                d.style.backgroundColor = d_l
            },100
        );

        // 红线拆除
        var r = document.getElementsByClassName("r")[0];
        r.onclick = function () {
            tz()
        };
        // 绿线爆炸
        var g = document.getElementsByClassName("g")[0];
        g.onclick = function () {
            bz()
        };

    </script>
</body>